<template>
  <div>
    <!-- <el-group-title
      title="附件"
      class="ccui-group-wrapper d_jump"
      index="contract"
    > -->
    <!-- <template slot="groupTitle"> -->
    <el-form
      :model="form"
      :rules="rules"
      ref="form2"
      label-width="160px"
      class="ccui-form"
      style="overflow: visible"
    >
      <div class="extend-btn">
        <el-upload
          :show-file-list="false"
          :action="uploadUrl"
          class="upload-demo tow"
          :before-upload="beforeAvatarUpload"
          :on-success="onSuccess"
          :on-progress="onProgress"
          :on-error="onError"
          :headers="headers"
        >
          <el-button
            plain
            v-show="$route.query.status !== '查看'"
            type="single-number"
            >上传附件</el-button
          >
        </el-upload>
      </div>
      <el-table
        :data="tableData"
        style="margin-bottom: 20px; width: 100%"
        border
        max-height="99999"
        class="ccui-form-child-table"
      >
        <el-table-column
          :show-overflow-tooltip="true"
          label="序号"
          type="index"
          min-width="20%"
          height="36px"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileName"
          label="文件名称"
          min-width="140%"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="fileSize"
          label="文件大小"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="createTime"
          label="上传时间"
          min-width="70%"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="scaleNum"
          label="操作"
          align="center"
          header-align="center"
          appendixInfor.vue
          min-width="70%"
        >
          <template slot-scope="scope">
            <span
              style="color: #0089ef; cursor: pointer"
              v-if="$route.query.status !== '查看'"
              @click="deleteAppend(scope.$index)"
              >删除</span
            >
            <span
              style="color: #0089ef; cursor: pointer"
              v-if="$route.query.status === '查看'"
              @click="downLoad(scope.row)"
              >下载</span
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- </template> -->
    <!-- </el-group-title> -->
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { addUrlPerFix } from "@/basa/utils";
export default {
  name: "attachment",
  props: {
    defalutFujian: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      form: {
        fileName: "", //合同附件里的文件名称
        fileSize: "", //合同附件里的文件大小
        priceRegion: "", //财务信息里的价格地区
        taxMethod: "", //计税方法
        taxType: "", //发票类型
        placeSign: "", //签订地点
        numberCopies: "", //合同份数
        phonePerson: "", //对方联系人
        taxpayer: "", //供应商纳税人类型
        materialSources: "", //物资来源
        paymentCoefficient: "", //支付系数
        advanceCharge: "", //预付款
        titleAccount: "", //账户名称
        accountNumber: "", //开户行账号
        accountName: "", //开户行名称
        fileArr: []
      },
      fujian: [],
      yanshou: [],
      rules: {},
      tableData: [],
      uploadUrl: addUrlPerFix(process.env.VUE_APP_UPLOAD_URL), //上传图片
      headers: {
        Authorization: Cookies.get("access_token") || ""
      }
    };
  },
  watch: {
    defalutFujian: {
      handler(n) {
        this.tableData = n;
      }
    },

    tableData: {
      handler(n) {
        this.$emit("fujian", n);
      },
      immediate: true
    }
  },
  methods: {
    onProgress(res) {
      this.uploadLoading = this.$loading({
        lock: true,
        text: "上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
    },
    onSuccess(res) {
      let fileData = res.data[0];
      this.tableData.push({
        uploadIds: fileData.uploadId,
        fileName: fileData.fileName,
        createTime: fileData.createTime,
        fileSize: Math.round(fileData.fileSize / 1024) + "kb"
      });
      this.form.fileArr.push(fileData.uploadId);
      this.form.fileArr = [...new Set(this.form.fileArr)];
      this.fujian = this.fujian.concat(fileData.uploadId);
      this.uploadLoading.close();
    },

    downLoad({ fileInfoId, fileName }) {
      let openUrl = document.createElement("a");
      openUrl.style.display = "none";
      openUrl.href = `${addUrlPerFix(
        process.env.VUE_APP_BASE_URL
      )}/apis/smp/oss/downloadByUploadId?uploadId=${fileInfoId}`;
      openUrl.setAttribute("download", fileName);
      document.body.appendChild(openUrl);
      openUrl.click();
    },
    onError() {
      this.uploadLoading.close();
    },
    beforeAvatarUpload(file) {
      const isLt50 = file.size < 52428800;
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);

      const extension =
        testmsg === "xlsx" ||
        testmsg === "xls" ||
        testmsg === "doc" ||
        testmsg === "docx" ||
        testmsg === "ppt" ||
        testmsg === "pptx" ||
        testmsg === "pdf" ||
        testmsg === "bmp" ||
        testmsg === "jpg" ||
        testmsg === "png" ||
        testmsg === "jpeg";
      if (!isLt50) {
        this.$message({
          showClose: true,
          message: "文件大小不超过50M!",
          type: "error",
          ccuiCustom: true,
          duration: 0
        });
      }
      if (!extension) {
        this.$message({
          showClose: true,
          message:
            "文件必须为.xlsx .xls .doc .docx .ppt .pptx .pdf .bmp .jpg .png .jpeg类型",
          type: "error",
          ccuiCustom: true,
          duration: 0
        });
      }
      return isLt50 && extension;
    },
    deleteAppend(index) {
      console.log(index);
      //this.$refs.uploadItem.uploadFiles.splice(index, 1);
      this.tableData.splice(index, 1);
      this.form.fileArr.splice(index, 1);
      // sessionStorage.setItem("addAppendList", JSON.stringify(this.tableData));
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-table {
  /deep/th {
    padding: 0;
    height: 36px;
    line-height: 36px;
  }
  .el-table__body {
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
}
/deep/.extend-btn {
  text-align: right;
  margin-bottom: 10px;
}
</style>
